<template>
  <div class="manage">
    <!--form 搜索区-->
    <el-form :inline="true" :model="userForm">
      <el-form-item label="文件标识">
        <el-input placeholder="文件标识" v-model="userForm.uuid" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="文件名">
        <el-input placeholder="文件名" v-model="userForm.newName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="上传文件名">
        <el-input placeholder="上传文件名" v-model="userForm.oldName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="访问路径">
        <el-input placeholder="访问路径" v-model="userForm.path" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="物理存放路径">
        <el-input placeholder="物理存放路径" v-model="userForm.filePath" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini" plain><i class="el-icon-search"></i>搜 索</el-button>
        <el-button  @click="onReset" size="mini" plain><i class="el-icon-refresh"></i>重 置</el-button>
      </el-form-item>
    </el-form>
    <div class="manage-header">
      <el-button @click="handelDel" type="danger" plain size="mini" :disabled="disabled">
        <i class="el-icon-delete"></i>删除
      </el-button>
    </div>
    <div class="common-table">
      <!--内容-->
      <el-table
        height="90%"
        :data="tableData"
        style="width: 100%"
        stripe
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="uuid" label="文件标识" width="200px" fixed></el-table-column>
        <el-table-column prop="oldName" label="上传名称" width="200px"></el-table-column>
        <el-table-column prop="newName" label="文件名称" width="350px"></el-table-column>
        <el-table-column prop="path" label="访问路径" width="400px"></el-table-column>
        <el-table-column prop="filePath" label="存放路径" width="400px"></el-table-column>
        <el-table-column
          prop="createTiem"
          width="170"
          label="创建时间">
        </el-table-column>
        <el-table-column prop="" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handelDeldelUploadFile(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--页码-->
      <div class="pager">
        <el-pagination
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handelPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
    import { listPageUploadFile,  delUploadFile, delUploadFiles} from "../api"
    export default {
        name: "UploadFile",
        data(){
            return{
                tableData: [],
                modelType: 0,  //0：新增，1：修改
                total: 0,
                pageData:{
                    page: 1,
                    limit: 20
                },
                //查询条件
                userForm: {
                    uuid: "",
                    newName: '',
                    oldName: '',
                    path: '',
                    filePath: '',
                    delFlag: null
                },
                disabled:true,
                ids:[]
            }
        },
        methods:{
            //删除
            handelDeldelUploadFile(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delUploadFile(row).then(({ data })=>{
                        this.listPageUploadFile();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            handelDel(){
                delUploadFiles({ids:this.ids}).then(({data})=>{
                    this.listPageUploadFile();
                    this.$message({
                        type: data.type,
                        message: data.message
                    });
                });
            },
            //选中的记录
            handleSelectionChange(val){
                this.ids=[];
                val.forEach(item=>{
                    this.ids.push(item.id);
                });
                if (this.ids.length>0){
                    this.disabled=false;
                }else{
                    this.disabled=true;
                }
            },
            //获取列表
            listPageUploadFile(){
                listPageUploadFile({...this.userForm,...this.pageData}).then(( {data} )=>{
                    //console.log(data,"获取的")
                    this.tableData=data.list;
                    //如果data.count不存在 就为0
                    this.total=data.count || 0;
                });
            },
            //获取页码
            handelPage(val){
                this.pageData.page=val;
                this.listPageUploadFile();
            },
            //条件查询
            onSubmit(){
                this.listPageUploadFile();
            },
            //重置
            onReset(){
                this.userForm={
                    uuid: "",
                    newName: '',
                    oldName: '',
                    path: '',
                    filePath: '',
                    delFlag: null
                }
            }
        },
        //页面首次加载时调用的地方
        mounted() {
            this.listPageUploadFile();
        }
    }
</script>

<style lang="less" scoped>
  .manage{
    height: 90%;
    .manage-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .common-table{
      position: relative;
      //动态计算高度
      height: calc(100% - 62px);
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }
</style>
